<template>
  <div id="notebook">
    <!-- 侧边栏 -->
    <aside class="side-bar">
      <div class="toolbar">
        <button @click="addNote" :title="addButtonTitle"><i class="material-icons">add</i>Add note</button>
      </div>
      <div class="notes">
        <div 
          class="note" 
          @click="selectNote(note)" 
          :class="{ selected: note === selectedNote }"
          v-for="(note, index) in sortedNotes" 
          :key="index"><i class="icon material-icons" v-if="note.favorite">star</i>{{ note.title }}</div>
      </div>
    </aside>
    <template v-if="selectedNote">
      <!-- 主面板 -->
      <section class="main">
        <div class="toolbar">
          <input type="text" v-model="selectedNote.title" placeholder="Note title">
          <button @click="favoriteNote" title="Favorite note"><i class="material-icons">{{ selectedNote.favorite ? 'star' : 'star_border' }}</i></button>
          <button @click="removeNote" title="Remove title"><i class="material-icons">delete</i></button>
        </div>
        <textarea v-model="selectedNote.content"></textarea>
        <div class="toolbar status-bar">
          <span class="date">
            <span class="label">Created</span>
            <span class="value">{{ selectedNote.created | date }}</span>
          </span>
          <span class="lines">
            <span class="label">Lines</span>
            <span class="value">{{ linesCount }}</span>
          </span>
          <span class="words">
            <span class="label">Words</span>
            <span class="value">{{ wordsCount }}</span>
          </span>
          <span class="characters">
            <span class="label">Characters</span>
            <span class="value">{{ charactersCount }}</span>
          </span>
        </div>
      </section>

      <!-- 预览面板 -->
      <aside class="preview" v-html="notePreview"></aside>
    </template>
    
  </div>
</template>

<script>

export default {
  data () {
    return {
      content: localStorage.getItem('content') || 'You can write in **markdown** ',
      notes: JSON.parse(localStorage.getItem('notes')) || [],
      selectedId: localStorage.getItem('selected-id') || null
    }
  },
  computed: {
    notePreview () {
      return this.selectedNote ? this.marked(this.selectedNote.content) : ''
    },
    addButtonTitle() {
      return `${this.notes.length} note(s) already`
    },
    selectedNote() {
      return this.notes.find(note => note.id === this.selectedId)
    },
    sortedNotes() {
      return this.notes
        .slice()
        .sort((a, b) => {return a.created - b.created})
        .sort((a, b) => {return (a.favorite === b.favorite) ? 0: a.favorite ? -1 : 1})
    },
    linesCount() {
      if(this.selectedNote) {
        return this.selectedNote.content.split(/\r\n|\r|\n/).length
      }
    },
    wordsCount () {
      if(this.selectedNote) {
        var s = this.selectedNote.content;
        
        s = s.replace(/\n/g, ' ')

        s = s.replace(/(^\s*)|(\s*$)/gi, '')

        s = s.replace(/\s\s+/gi, ' ')

        return s.split(' ').length
      }
    },
    charactersCount() {
      if(this.selectedNote) {
        return this.selectedNote.content.split('').length
      }
    }
  },
  created() {
  },
  watch: {
    notes: {
      handler: 'saveNotes',
      deep: true
    },
    selectedId (val) {
      localStorage.setItem('selected-id', val)
    }
  },
  
  methods: {
    selectNote (note) {
      this.selectedId = note.id;
    },
    favoriteNote() {
      this.selectedNote.favorite ^= true
    },
    removeNote() {
      if(this.selectedNote && confirm('Delete the note?')){
        const index = this.notes.indexOf(this.selectedNote)
        if(index !== -1) {
          this.notes.splice(index, 1)
        }
      }
    },
    saveNotes() {
      localStorage.setItem('notes', JSON.stringify(this.notes))
    },
    addNote () {
      const time = Date.now()
      const note = {
        id: String(time),
        title: `New note ${this.notes.length + 1}`,
        content: '**Hi!**This notebook is using [markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for formatting!',
        created: time,
        favorite: false,
      }
      this.notes.push(note)
    }
  },
}
</script>